<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/style.css" />
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.group{
				display:flex;
				flex-flow: row nowrap;
				height:200px;
				text-align: center;
				flex: 1 1 0;
			}
			.item{
				height:100%;
				width:50%;
				padding: 15px;
			}
			.bollborder{
				width:100%;
				height:100%;
				line-height: 100%;
				border-radius: 5px;
				display: table;
			}
			.bollborder_title{
				color:white;
				font-size: 18px;
				vertical-align: middle;
				display: table-cell;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">榜单</h1>
		</header>
		<div class="mui-content" style="background: white;" id="main_bollborder">
			<div id="slider" class="mui-slider" >
			  <div class="mui-slider-group mui-slider-loop">
			    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			    <div class="mui-slider-item mui-slider-item-duplicate">
			      <a href="#">
			        <img src="../images/banner1.jpg">
			      </a>
			    </div>
			    <!-- 第一张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img src="../images/banner1.jpg">
			      </a>
			    </div>
			    <!-- 第二张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img src="../images/banner2.jpg">
			      </a>
			    </div>
			    <!-- 第三张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img src="../images/banner3.jpg">
			      </a>
			    </div>
			    <!-- 第四张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img src="../images/banner1.jpg">
			      </a>
			    </div>
			    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			    <div class="mui-slider-item mui-slider-item-duplicate">
			      <a href="#">
			        <img src="../images/banner1.jpg">
			      </a>
			    </div>
			  </div>
			  <div class="mui-slider-indicator">
			    <div class="mui-indicator mui-active"></div>
			    <div class="mui-indicator"></div>
			    <div class="mui-indicator"></div>
			  </div>
			</div>
			<!--豆瓣票房和北美票房榜-->
			<div class="group">
				<div class="item" id="doubang_top">
					<div class="bollborder" style="background: linear-gradient(#941AE6,#F1E0FC);background: -webkit-linear-gradient(#941AE6,#F1E0FC);">
						<div class="bollborder_title">
							豆瓣票房榜
						</div>
					</div>
				</div>
				<div class="item" id="beimei_top">
					<div class="bollborder" style="background: linear-gradient(#3370CC,#CEE1FD);background: -webkit-linear-gradient(#3370CC,#CEE1FD);">
						<div class="bollborder_title">
							北美票房榜
						</div>
					</div>
				</div>
			</div>
			<div class="dark-big" style="margin-left:15px">即将上映</div>
			<ul class="mui-table-view" style="margin-top:5px">
				<li class="mui-table-view-cell" v-for="item in movies" @click="open_detail(item)">
					<a>
						<img :src="item.cover" class="mui-pull-left" style="width:60px;height: 90px;margin-right: 15px;"  />
						<div>
							<div class="dark-big mui-ellipsis">{{item.title}}</div>
							<div class="mui-ellipsis">
								<span class="gray-medium">{{item.genres}}</span>
								<span class="orange-medium" v-if="item.score>0">{{item.score}}</span>
								<span class="orange-medium" v-else>暂无评分</span>
							</div>
							<div class="gray-medium mui-ellipsis">导演:{{item.directors}}</div>
							<div class="gray-medium mui-ellipsis">主演:{{item.casts}}</div>
						</div>
						<button class="mui-btn mui-btn-warning mui-btn-outlined">想看</button>
					</a>
				</li>
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
			  pullRefresh: {
			    container:"#main_bollborder",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down: {
			      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
			      height:'50px',//可选,默认50px.下拉刷新控件的高度,
			      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
			      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
			      auto: false,//可选,默认false.首次加载自动上拉刷新一次
			      callback :refreshData//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    },
			    up: {
			      height:50,//可选.默认50.触发上拉加载拖动距离
			      auto:true,//可选,默认false.自动上拉加载一次
			      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
			      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			      callback :loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			  }
			});
			//轮播
			mui('.mui-slider').slider({
				interval:3000//自动轮播周期默认0，这里是3s
			})
			//vue
			var main_data = new Vue({
				el:'#main_bollborder',
				data:{
					movies:[]
				},
				methods:{
					open_detail:function(item){
						mui.fire(detailPage,'movieId',{
							id:item.id
						});
						detailPage.show('slide-in-right')
					}
				}
			})
			var detailPage;
			//预加载
			mui.plusReady(function(){
				detailPage = plus.webview.getWebviewById('movies_detail')
				//预加载电影详情页面
				if(!detailPage){
					detailPage = mui.preload({
						id:'movies_detail',
						url:'./html/movies_detail.html'
					});
				}
			})
			//下拉刷新
			function refreshData(){
				mui.getJSON('http://api.douban.com/v2/movie/coming_soon',{
					start:0,
					count:10
				},function(resp){
					main_data.movies.splice(0,main_data.movies.length);
					main_data.movies = main_data.movies.concat(convert(resp.subjects));
					 mui('#main_bollborder').pullRefresh().endPulldown();
				})
			}
			//请求下一页数据
			function loadMoreData(){
					mui.getJSON('http://api.douban.com/v2/movie/coming_soon',{
						start:main_data.movies.length,
						count:10
					},function(resp) {
						main_data.movies = main_data.movies.concat(convert(resp.subjects));
						mui('#main_bollborder').pullRefresh().endPullupToRefresh(main_data.movies.length > resp.total);
					});
				}
			//数据转换
			function convert(items){
				var newitems = [];
				items.forEach(function(item){
					var genres = item.genres.toString().replace(/,/g,' / ');
					var cover = item.images.large;
					var directors = '';
					for(var i=0;i<item.directors.length;i++){
						directors+=item.directors[i].name;
						if(i!=item.directors.length-1){
							directors+='/';
						}
					}
					var casts = '';
					for(var i=0;i<item.casts.length;i++){
						casts+=item.casts[i].name;
						if(i!=item.casts.length-1){
							casts+='/';
						}
					}
					newitems.push({
						genres:genres,//类型
						id:item.id,//id
						cover:cover,//图片
						directors:directors,//导演
						casts:casts,//主演
						title:item.title,//影名
						score:item.rating.average//评分
					})
				})
				return newitems;
			}
			//给豆瓣top添加点击事件
			mui('#doubang_top')[0].addEventListener('tap',function(){
				mui.openWindow({
					id:'doubang_top',
					url:'./doubang_top.html',
					waiting:{
						autoShow:true,
						title:'正在加载....'
					}
				})
			})
			//给北美top添加点击事件
			mui('#beimei_top')[0].addEventListener('tap',function(){
				mui.openWindow({
					id:'beimei_top',
					url:'./beimei_top.html',
					waiting:{
						autoShow:true,
						title:'正在加载....'
					}
				})
			})
		</script>
	</body>

</html>